<template>
  <div>
    <div :class="styles.contend">
      <left-navigation :class="styles['navigation-left']"></left-navigation>
      <swipe>
        <swipe-item v-for="item in swipeData" :key="item.id" :class="styles['swipe-item']">
          <div :class="styles['swipe-item']">
            <img :src="item.src">
          </div>
        </swipe-item>
      </swipe>

      <swipe :width="180" :showControlBar="recommendControlBar"
             @swipeMouseover="recommendControlBar=true"
             @swipeMouseleave="recommendControlBar=false"
             :time="5000"
             style="margin-left: 10px"
      >
        <swipe-item v-for="(item,index) in recommendData" :key="index" :class="styles['swipe-item']">
          <div :class="styles['swipe-recommend']">
            <img :src="recommend.src" v-for="recommend in item" :key="recommend.id">
          </div>
        </swipe-item>
      </swipe>
      <right></right>
    </div>
  </div>
</template>

<script>
  import styles from './index.scss'
  import swipe from '../swipe/swipe'
  import swipeItem from '../swipe/swipe-item'
  import right  from './right'
  import  leftNavigation from './left'
  import {SWIPE_DATA, RECOMMEND_DATA} from '@util/constant'

  export default {
    name: "index",
    model: {},
    props: {},
    components: {
      swipe,
      swipeItem,
      leftNavigation,
      right
    },
    data() {
      return {
        styles,
        prefix: '../../../../assets/',
        url: require('../../../../assets/pic4.png'),
        swipeData: SWIPE_DATA,
        recommendData: RECOMMEND_DATA,
        recommendControlBar: false
      }
    },
    computed: {},
    beforeCreate: function () {

    },
    created: function () {
      // this.initData()
      // console.error(this.swipeData)
    },
    beforeMount: function () {

    },
    mounted: function () {
    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      // initData() {
      //   let arr = SWIPE_DATA.map((currentValue) => {
      //     if (get(currentValue, 'src')) {
      //       currentValue.src = this.prefix + currentValue.src
      //     }
      //     return currentValue
      //   })
      //   this.swipeData.splice(0, 0, ...arr)
      // }
    }
  }
</script>
